<template>
  <button class="demo-button">
    <slot v-if="hasSlot" />
    <div v-else>默认标题</div>
  </button>
</template>

<script>
import { useSlots } from "vue";

export default {
  name: "demo-button",

  data: function () {
    return {
      hasSlot: useSlots().default,
    };
  },

  props: {
    color: String,
    type: {
      type: String,
      default: "primary",
    },
  },
};
</script>

<style lang="scss">
.demo-button {
  min-width: 120px;
  color: #fff;
  font-size: 16px;
  line-height: 36px;
  background-color: #f44;
  border: none;
  border-radius: 30px;
}
</style>
